<template>
    <div class="wrapper">
        <h1>PropsSu-2-Inject</h1>
        <h4>银子：{{ money }} 万元</h4>
        <button @click="updateMoney(10)">更新银子</button>
        <h4>车子：一辆{{ carObj.brand }}车，价值{{ carObj.price }}万元</h4>
        <h4>不存在的inject：{{ nothing }} 万元</h4>
    </div>
</template>

<script lang="ts" setup name="PropsSu2Inject">

import { inject } from 'vue'

let { money, updateMoney } = inject('moneyContext', { money: 0, updateMoney: (v: number) => { } })

let carObj = inject('carObj', {
    brand: '默认值',
    price: 0,
})

let nothing = inject('nothing', 'inject没找到provide，使用默认值吧')

</script>

<style scoped>
.wrapper {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
    margin: 20px
}

button {
    margin: 0 5px;
}
</style>